<template>
  <van-field :name="name" :label="label" class="i-checkboxbutton">
    <template #input>
      <van-checkbox-group v-model="modelValue" v-bind="computedAttrs">
        <van-checkbox
          v-for="$item in props.itemList"
          :name="$item.value"
          v-bind:key="$item.value"
          v-bind="checkboxAttrs"
          :class="props.theme"
          @click="emits('change', $item)"
        >
          <template #icon>
            <van-tag type="primary"
              >{{ $item.label }}</van-tag>
          </template>
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </van-field>
</template>
  <script setup name="I-Checkboxbutton">
import { computed } from 'vue'
const emits = defineEmits(['change'])
const $attrs = useAttrs()
const modelValue = defineModel({ type: Array, default: '' })
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: 'checkbox'
  },
  itemList: {
    type: Array,
    default: []
  },
  direction: {
    default: 'horizontal'
  },
  //checkbox的属性
  checkboxAttrs: {
    type: Object,
    default: {}
  },
  theme: {
    type: String,
    default: 'theme1'
  }
})

// 计算属性，合并 props 和 $attrs
const computedAttrs = computed(() => {
  return {
    ...$attrs,
    direction: props.direction //横着布局比较多
  }
})
</script>
<style scoped lang="less">
.i-checkboxbutton {
  .theme1 {
    .van-tag {
    }
    .van-checkbox__icon--checked {
      .van-tag {
        background-color: #ff0000;
        color: #00ff00;
      }
    }
  }
}
</style>